<template>
  <!-- 弹窗 -->
  <el-dialog
    ref="dialogRef"
    v-model="showFlag"
    :title="dialogTitle"
    width="50%"
    align-center
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form ref="ruleFormRef" :model="form" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12"
          ><el-form-item label="名&emsp;&nbsp;称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请填写名称"
            /> </el-form-item
        ></el-col>
        <el-col :span="12"
          ><el-form-item label="标&emsp;&nbsp;识" prop="label">
            <el-input
              v-model="form.label"
              placeholder="请填写标识"
            /> </el-form-item
        ></el-col>
      </el-row>
      <el-form-item label="备&emsp;&emsp;注">
        <el-input
          v-model="form.remark"
          type="textarea"
          resize="none"
          placeholder="请填写备注"
        />
      </el-form-item>
      <!-- 权限树形表 -->
      <el-form-item label="功能权限">
        <div class="tree">
          <MyTree @checkTreeBox="handleCheck" :checkedArr="form.menuIdList"/>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import eventBus from "@/utils/eventBus";
import { getAddRoleAPI, getUpdateRoleAPI } from "@/api/role";
import MyTree from "@/components/MyTree.vue";
export default {
  components: {
    MyTree,
  },
  data: () => {
    return {
      showFlag: false, //显示弹窗
      dialogTitle: "", //弹窗标题
      //表单数据
      form: {
        id: 0, //用于判断是新增(0)还是编辑
        name: "",
        label: "",
        remark: "",
        menuIdList: [],
      },
      //表单规则
      rules: {
        name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: ["input", "blur"],
          },
        ],
        label: [
          {
            required: true,
            message: "标识不能为空",
            trigger: ["input", "blur"],
          },
        ],
      },
    };
  },
  mounted() {
    //挂载完成,判断类型
    this.showDialog();
  },
  computed: {
    //判断是否是编辑模式
    isEidtMode() {
      return this.form.id !== 0;
    },
  },
  methods: {
    //根据编辑和新增按钮自动执行
    showDialog() {
      eventBus.on("showDialog", ({ form, dialogTitle, showFlag }) => {
        this.form = form;
        this.showFlag = showFlag;
        this.dialogTitle = dialogTitle;
      });
    },

    //表格新增/编辑的确认验证
    async submitForm() {
      //1. 表单验证
      await this.$refs.ruleFormRef.validate(async (valid, fields) => {
        //表单验证通过
        if (valid) {
          //2. 根据 isEidtMode 来控制调用不同的接口
          if (this.isEidtMode) {
            await getUpdateRoleAPI(this.form);
          } else {
            const { id, ...form } = this.form;
            await getAddRoleAPI(form);
          }
          //3. 通知父组件,我好了
          this.$emit("editOrAdd", this.form);
          this.showFlag = false;
        } else {
          //表单验证失败
          console.log("验证失败", fields);
        }
      });
    },

    //选中权限多选框
    handleCheck(payload) {
      this.form.menuIdList = payload;
    },
  },
};
</script>
